import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { Menu, Icon, Tooltip } from 'antd';
const SubMenu = Menu.SubMenu;
import { WeaTableNew } from 'comsMobx';
const WeaTable = WeaTableNew.WeaTable;
import { WeaErrorPage, WeaLeftRightLayout, WeaTop, WeaRightMenu, WeaRadioGroup, WeaReportCard, WeaEchart, WeaNewScroll, WeaSelect, WeaAlertPage, WeaTab } from "ecCom";
import * as cct from '../../constants/CommonConstant';
import * as rct from '../../constants/ReportConstant';
import "./style/index.css";

@inject('contractRevPlanStore')
@observer
class ContractRevPlanReport extends React.Component {

    constructor(props) {
        super(props);
    }


    componentWillUpdate() {

    }

    componentDidUpdate() {
        if (this.refs.chart) {
            this.refs.chart.paint();
        }
    }

    componentWillReceiveProps(nextProps){
        
        const flag = this.props.hasOwnProperty("location");
        if(flag){
            const keyOld = this.props.location.key;
            const keyNew = nextProps.location.key;
            if(keyOld!=keyNew){
                const store = this.props.contractRevPlanStore;
                store.reLoad();
            }
        }
    }

    render() {
        const store = this.props.contractRevPlanStore;

        let { tableStore, loading, names,contract_amounts_sr,contract_amounts_zc, showList } = store;
        names = toJS(names);
        contract_amounts_sr = toJS(contract_amounts_sr);
        contract_amounts_zc = toJS(contract_amounts_zc);
        const config = [
            rct.year
        ];

        const option = {
            color: rct.colors,
            title: {
                // text: '某地区蒸发量和降水量',
                // subtext: '纯属虚构'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
          
            toolbox: {
                show: false,
                feature: {
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: names
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }

            ],
            series: [
                {
                    name: "应收",
                    type: 'bar',
                    data: contract_amounts_sr,
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    },
                    markLine: {
                        data: [
                            { type: 'average', name: '平均值' }
                        ]
                    },

                    barMaxWidth: '50px'
                },
                {
                    name: "已收",
                    type: 'bar',
                    data: contract_amounts_zc,
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    },
                    markLine: {
                        data: [
                            { type: 'average', name: '平均值' }
                        ]
                    },
                    barMaxWidth: '50px'
                }
            ]
        };
        
        
        return (
            <WeaRightMenu>
                <WeaTop
                    loading={loading}
                    title={"应收账款"}
                    icon={<i className={cct.icon} />}
                    iconBgcolor={cct.iconBgcolor}
                    showDropIcon={true}
                    dropMenuDatas={[]}
                    buttons={[<span className="wea-contract-showlist">
                    <Tooltip title={`${showList?'隐藏列表':'显示列表'}`}>
                        <span className={`icon ${showList?'cur':''}`} onClick={this.changeShowList.bind(this, showList)}>
                            <i className={`icon-coms-List`} />
                        </span>
                    </Tooltip>
                </span>
                ]}
                    buttonSpace={10}
                >
                    <div className="wea-contract-report">
                        <div className="content">
                            <WeaNewScroll height='100%' toTop={true}>
                                <div className="scroll-content">
                                    <div style={{ paddingTop: "10px" }}>
                                        <WeaRadioGroup config={config} onChange={(params) => { store.doSearch(params) }} />
                                    </div>
                                    <div class="card-report" >
                                        {
                                            (names.length > 0 ?
                                                <WeaEchart ref={"chart"} option={option} useDefault={false} /> :
                                                <WeaAlertPage icon="icon-coms-blank">
                                                    <div>暂无数据</div>
                                                </WeaAlertPage>
                                            )
                                        }

                                    </div>
                                    {(
                                        showList&&
                                        <div style={{ paddingTop: "10px" }}>
                                            <WeaTable hasOrder={true} comsWeaTableStore={tableStore} getColumns={c => this.reRenderColumns(c)}/>
                                        </div>
                                    )}
                                </div>
                            </WeaNewScroll>
                        </div>
                    </div>
                </WeaTop>
            </WeaRightMenu>
        );
    }

   

    reRenderColumns(columns){
        let that = this;
        const store = that.props.contractRevPlanStore;
        columns.forEach(c=>{
            if(c.dataIndex=='pay_count_zb'){
                c.render = function(text, record){
                    let v = Number(record.pay_count_zbspan).toFixed(2);
                    return <span>{v}%</span>
                }
            }else if(c.dataIndex=='pay_count_sy_zb'){
                c.render = function(text, record){
                    let v = Number(record.pay_count_sy_zbspan).toFixed(2);
                    return <span>{v}%</span>
                }
            } else {
                c.render = function(text, record){
                    let valueSpan = record[c.dataIndex + "span"] !== undefined ? record[c.dataIndex + "span"] : record[c.dataIndex];
                    return <span title={valueSpan} dangerouslySetInnerHTML={{__html: valueSpan}}></span>
                }
            }
        })
        return columns;
    }

    changeShowList = (bl, e) => {
        e.preventDefault();
        e.stopPropagation();
        const { changeShowList } = this.props.contractRevPlanStore;
        changeShowList(bl);
    }
}

export default ContractRevPlanReport;